<template>  
  <div class="inputFilter_warp" id='cp-seach_select'>
  	<div class="search_input">
			<div class="search_title">
        <span  class="title">{{curTitle}}</span>
        <div class="search_title-down">
          <ul>
            <li @click="handleTitleItemClick(item)" v-for="(item, index) in downList">
              <div class="search_down_item" :class="item.type == curType?'active':''">
                {{item.title}}
              </div>
            </li>
          </ul>
        </div>
        <i class="ivu-icon ivu-icon-arrow-down-b ivu-select-arrow"></i>
			</div>
      <Input 
        v-model="searchName" 
        :placeholder = "'请输入'+curTitle" 
        @on-blur = "blurSearch"
        ></Input>
  	</div>
  </div>
</template>
<script>

import Helper from '@/common/helper'
import Rest from '@/rest'
import Api from '@/api'

export default {
  data () {
    return {
			searchName: '',
      curType: 1,
      curTitle: '',
      params: {
        'searchType': 1,
        'searchName': ''
      },
    }
  },
  props: {
    downList: {
    	type: Array,
      default: function() {
        return [{
          title: "公司",
          type: "1"
        },
        {
          title: "案场",
          type: "2"
        }]
      }
    },
    titleWidth:{
      type: Number,
      default: 90
    }
  },
  methods:{
    init(){
      this.resetInit();
      this.setTitleWidth();
    },
    setTitleWidth(){
      $('#cp-seach_select .search_title').css({'width':this.titleWidth+'px'});
      $('#cp-seach_select .ivu-input-wrapper .ivu-input').css({'padding-left':this.titleWidth+'px'});
    },
    resetInit(){
      this.searchName = '';
      this.curType = this.params.searchType =this.downList[0].type;
      this.curTitle = this.downList[0].title;
    },
    blurSearch(){
      this.params.searchName = this.searchName;
      this.$emit('handleSearch', this.params);
    },
    // 切换分类
    handleTitleItemClick(item){
      this.curType = item.type;
      this.curTitle = item.title;
      this.params.searchType = item.type;
      this.$emit('handleSearch', this.params);
    },
  },
  created() {
    this.init();
  },
  activated() {
    this.init();
  },
}
</script>

<style lang="scss">
	@import "../../assets/sass/install";
	.inputFilter_warp{
		display: inline-block;
    width: 271px;
    height: 50px;
    color: #657180;
    position: relative;
    .search_input{
    	position: relative;
    	.search_title{
    		cursor: pointer;
    		display: inline-block;
    		position: absolute;
        z-index: 1;
    		left: 0;
    		top: 11px;
    		width: 90px;
    		height: 30px;
        line-height: 30px;
    		font-size: 14px;
    		color: #ccc;
    		padding-left: 7px;
        text-align: left;
        color: #657180;
        .title{
          display: inline-block;
          max-width: 100%;
          white-space: nowrap;
          padding-right: 15px;
          overflow: hidden;
          text-overflow:ellipsis;
        
        }
        &:hover{
          .search_title-down{
            display:inline-block;
          }
          .ivu-select-arrow{
            transform: rotate(180deg);
          }
        };
        .search_title-down{
          display: none;
          font-size: 13px;
          width: 100px;
        }
    	}
    }
    .search_title-down,.search_down{
      position: absolute;
      top: 31px;
      left: 0;
      @include transition(500ms);
      @include radius(3px);
      @include overflowCss();
      max-height: 380px;
      width: 180px;
      overflow: auto;
      overflow-x: hidden;
      padding: 5px 0px;
      background-color: #fff;
      box-shadow: 0 1px 6px rgba(0,0,0,.2);
      z-index: 900;
      text-align: left;
      &>ul{
      	font-size: 0;
      	&>li{
					font-size: 0;
      	}
      }
      .search_down_item{
				padding: 7px 16px;
				font-size: 13px;
				line-height: normal;
				background-color: #fff;
				cursor: pointer;
				overflow: hidden;
	      white-space: nowrap;
	      text-overflow:ellipsis;
        &.active{
          background-color: #02b0f0;
          color: #fff;
          &:hover{
            background-color: #02b0f0;
            color: #fff;
          }
        }
				&:hover{
					background-color: #f3f3f3;
				}
      }
      .search_nodata{
      	text-align: center;
      	color: #999;
      	font-size: 13px;
      	padding: 5px 0;
      }
    }
    .search_down{
      left: 101px;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
		    color: #999; opacity:1; 
		}

		::-moz-placeholder { /* Mozilla Firefox 19+ */
		    color: #999;opacity:1;
		}

		input:-ms-input-placeholder{
		    color: #999;opacity:1;
		}

		input::-webkit-input-placeholder{
		    color: #999;opacity:1;
		}
		.ivu-input-wrapper{
			.ivu-input{
				padding-left: 90px;
			}
		}
	}
</style>
